<%--
    Document   : user
    Created on : Sep 17, 2013, 6:48:55 AM
    Author     : Tùng
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <link type="text/css" href="css/user.css" rel="stylesheet">
        <link type="text/css" href="css/bootstrap.css" rel="stylesheet">
        <link type="text/css" href="css/index.css" rel="stylesheet">



        <script type="text/javascript" src="js/modernizr.min.js"></script>
        <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>


        <script type="text/javascript" src="js/raphael-min.js"></script>
        <script type="text/javascript" src="js/underscore-min.js"></script>

        <script type="text/javascript" src="js/backbone-min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/transition.js"></script>

        <script type="text/javascript" src="js/index.js"></script>
        <title>Setting Page</title>
        <c:if test="${empty sessionScope.ACCOUNT}">
            <c:redirect url="login.jsp"/>
        </c:if>
        <c:if test="${not empty sessionScope.CHANGEPASSWORD}">
            <script type="text/javascript">
                $(function popuptracking() {
                    $("#dialog-modal").dialog({
                        minHeight: 300,
                        minWidth: 400,
                        modal: true,
                        title: "Change Password",
                        close: function(){
                            $("#main1").removeClass("ui-widget-overlay ui-front");
                        }
                    });

                    $("#main1").addClass("ui-widget-overlay ui-front");
                });


            </script>
        </c:if>
    </head>
    <body>
        <div id="main1">
            <div id="fixed-header" class="navbar-fixed-top row">
                <div id="menu" class="row">
                    <div id="menu-inner">
                        <div id="messages"></div>
                        <div id="menu-left" class="col-5">
                            <div id="dd-left" class="col-1 text-left">
                                <a data-toggle="dropdown" style="margin-top:20px" class="btn btn-disabled dropdown-toggle"><i class="icon-menu"></i></a>
                                <ul aria-labelledby="dLabel" role="menu" class="dropdown-menu">
                                    <li class="caret-up"></li>
                                    <li> <a href="CollectionController?btAction=LoadAllCollection">Collection</a></li>
                                    <li><a href="index.jsp">Search Products</a></li>
                                    <li><a href="ManageProductController?btAction=ShowTrackedProduct">Your Products</a></li>
                                    <li><a href="FeedbackController?btAction=ShowFeedback">Feedback</a></li>
                                    <li>______________________</li>
                                    <li> &nbsp;&nbsp;&nbsp;Member System</li>
                                </ul>
                            </div>
                            <div class="col-2 hiw">
                                <a href="home.jsp">Home</a>
                            </div>
                        </div>
                        <div class="col-2 text-center">
                            <img src="Images/PRTS.png" style="height: 80px"/>
                        </div>
                        <div id="menu-right" class="col-5">
                            <c:if test="${not empty sessionScope.ACCOUNT}">
                                <div id="dd-right">
                                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                                        <span id="username-outer">
                                            <span id="username">${sessionScope.ACCOUNT.emailAddress}</span>
                                        </span>
                                        <span class="caret"></span>
                                    </a>
                                    <ul aria-labelledby="dLabel" role="menu" class="dropdown-menu">
                                        <li class="caret-up"></li>
                                        <li>
                                            <a id="profile" href="AccountController?action=updateAccountDetail">
                                                Account Preferences
                                            </a>
                                        </li>
                                        <c:if test="${sessionScope.ACCOUNT.role.roleID != 3}">
                                            <li>
                                                <a href="AdminController?btAction=LoadPage">Admin System</a>
                                            </li>
                                        </c:if>
                                        <li>
                                            <a id="history" href="MessageController?btAction=LoadReceivedMessage">
                                                Message
                                            </a>
                                        </li>
                                        <li>
                                            <a id="logout" href="HomeController?btAction=logout">
                                                Logout
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="pull-right ">
                                    <a href="ManageProductController?btAction=ShowTrackedProduct">My Finds</a>
                                </div>
                            </c:if>
                        </div>
                    </div>
                </div>

                <div id="tools-wrapper">
                    <div class="row" id="sub-menu">
                        <div id="sub-menu-inner">
                            <div class="col-11">

                            </div>
                            <div class="col-1">
                                <div class="col-10 pull-right">
                                    <button id="hide-url-paste-toolbar" class="btn btn-block btn-default">
                                        <i class="icon-exit"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="content-wrapper" style="margin-top: 70px;">
                <div class="row profile-container" style="margin-top: 10px; ">

                    <c:set var="accountdetail" value="${sessionScope.UPDATEACCOUNTDETAIL}"/>
                    <c:if test="${not empty accountdetail}">
                        <h3 style="color:red" align="center">${UPDATEERR}${CHANGEERR}${CHANGEFAIL}${CHANGECONFIRMFAIL}</h3>
                        <h3 align="center">${CHANGESUCCESS}</h3>
                        <form class="form-horizontal" id="login-form" method="post" action="AccountController">
                            <div class="control-group  " id="div_id_first_name">
                                <label class="control-label " for="id_first_name">
                                    Full name
                                </label>
                                <div class="controls">
                                    <input type="text"  placeholder="Full Name" name="txtUpdateUsername" value="${accountdetail.username}" maxlength="100" id="id_first_name">
                                </div>
                            </div>
                            <div class="control-group  " id="div_id_email">
                                <div class="controls">
                                    Email: ${accountdetail.emailAddress}
                                </div>
                            </div>
                            <div class="control-group  " id="div_id_nickname">
                                <div class="controls">
                                    Role ${accountdetail.role.roleName} 
                                </div>
                            </div>
                            <div class="control-group  " id="div_id_nickname">
                                <div class="controls">
                                    Signed up from ${accountdetail.signupDate}
                                </div>
                            </div>

                            <div class="control-group  " id="div_id_email_weekly_summary"style="text-align: left">
                                <div class="controls">
                                    <c:if test="${not empty sessionScope.ACCEPTED1}">
                                        <label class="checkbox " for="id_email_weekly_summary">
                                            <input type="checkbox" name="ckNoti1" id="id_email_weekly_summary" checked="checked">
                                            Email me weekly price change summaries
                                        </label>
                                    </c:if>
                                    <c:if test="${empty sessionScope.ACCEPTED1}">
                                        <label class="checkbox " for="id_email_weekly_summary">
                                            <input type="checkbox" name="ckNoti1" id="id_email_weekly_summary">
                                            Email me weekly price change summaries
                                        </label>
                                    </c:if>
                                </div>
                            </div>
                            <div class="control-group  " id="div_id_notify_price_desired" style="text-align: left">
                                <div class="controls">
                                    <c:if test="${not empty sessionScope.ACCEPTED2}">
                                        <label class="checkbox " for="id_notify_price_desired">
                                            <input type="checkbox" name="ckNoti2"  checked="checked">
                                            Email me when price met my desired
                                        </label>
                                    </c:if>
                                    <c:if test="${empty sessionScope.ACCEPTED2}">
                                        <label class="checkbox " for="id_notify_price_desired">
                                            <input type="checkbox" name="ckNoti2">
                                            Email me when price met my desired
                                        </label>
                                    </c:if>
                                </div>
                            </div>

                            <div class="row form-actions">

                                <button name="action" type="submit" class="btn btn-primary" value="updateInformation"
                                        onclick="return confirm('Do you want to save all information?');">Save</button>&nbsp;&nbsp;<a href="AccountController?action=ChangePassword">Change Password?</a>
                            </div>
                            <div class="control-group">
                                <label for="password_change" class="control-label"></label>
                                <div class="row form-actions">

                                </div>
                            </div>
                        </form>
                    </c:if>
                </div>
            </div>
        </div>

        <div id="dialog-modal" class="row top-inner" style="display: none; min-height: 100px;">
            <c:if test="${not empty sessionScope.CHANGEPASSWORD}">
                <div class="login-bg">
                    <form class="form-horizontal" id="login-form" method="post" action="AccountController">
                        <div class="form">
                            <input type="text" value="${sessionScope.LOGINEMAIL}" name="txtChangeEmailPassword" disabled="disabled"/>
                            <input type="password" placeholder="Old Password" name="txtChangeOldPassword" id="txtChangeOldPassword" required />
                            <input type="password" placeholder="New Password" name="txtChangeNewPassword" id="txtChangeNewPassword" required />
                            <input type="password" placeholder="Confirm New Password" id="txtChangeConfirmNewPassword"required />
                        </div>
                        <div id="lower-login" class="row">
                            <div class="login-signup col-lg-6 col-md-4 col-sm-12 pull-left">
                                <button name="action" type="submit" class="btn btn-primary btn-block" value="changePass"
                                        onclick="if ((txtChangeOldPassword.value.length < 7) || (txtChangeOldPassword.value.length >15)) {
                                            alert('Password must have length from 7 to 15 characters');
                                            return false;
                                        }
                                        if ((txtChangeNewPassword.value.length < 7) || (txtChangeNewPassword.value.length >15)) {
                                            alert('New Password must have length from 7 to 15 characters');
                                            return false;
                                        }
                                        if ((txtChangeConfirmNewPassword.value.length < 7) || (txtChangeConfirmNewPassword.value.length >15)) {
                                            alert('New Password must have length from 7 to 15 characters');
                                            return false;
                                        }
                                        if (txtChangeNewPassword.value != txtChangeConfirmNewPassword.value) {
                                            alert('The enetered passwords do not match!!!');
                                            return false;
                                        }
                                        return confirm('Do you want to change password?');">Change</button>
                            </div>
                            <div class="login-signup col-lg-6 col-md-4 col-sm-12 pull-right">
                                <button name="action" type="reset" class="btn btn-primary btn-block"
                                        >Clear</button>
                            </div>
                        </div>
                    </form>
                </div>
            </c:if>
        </div>
        <% session.removeAttribute("CHANGEPASSWORD");%>
        <% session.removeAttribute("UPDATEERR");%>
    </body>
</html>
